<template>
  <div class="postVideoDiv">
    <el-form ref="videoFrom" :model="videoFrom">
      <el-form-item label="发布视频：">
          <video :poster="videoFrom.videoPoster" v-if="videoFrom.videoSrc !== ''" :src="videoFrom.videoSrc" style="width: 350px;"/>
          <div v-if="progressHiddenState === false">
            <el-progress type="circle" :percentage="num"/>
          </div>
          <el-upload v-if="uploadHiddenState === false"
                     class="upload-demo"
                     drag
                     :action="global.uploadUrl"
                     multiple
                     :on-success="getFirstImage"
                     :before-upload="beforeUpload"
                     :show-file-list="false">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">点击上传视频(默认封面为第一帧)</div>
          </el-upload>
      </el-form-item>
      <el-form-item label="封面：">
        <div style="margin-left: 80px">
          <el-upload :action="global.uploadUrl"
                     :show-file-list="false"
                     ref="coverUpdate"
                     :on-success="coverVideo">
            <el-button type="primary" @click="beforeUploadImg">点击上传</el-button>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item label="标题：">
        <div style="margin-left: 80px">
          <el-input placeholder="请输入标题" v-model="videoFrom.videoTitle"></el-input>
        </div>
      </el-form-item>
      <el-form-item label="类型：">
        <div style="margin-left: 80px">
          <el-radio v-model="videoFrom.videoType" label="1" @change="original">原创</el-radio>
          <el-radio v-model="videoFrom.videoType" label="2" @change="reprint">转载</el-radio>
          <div v-if="reprintInput === 'yes'">
            <el-input placeholder="请输入转载地址~" v-model="videoFrom.videoReprintUrl"/>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="社区：">
        <div style="margin-left: 80px">
          <el-button type="primary" @click="dialogFormVisible = true" v-model="communityName">
            {{ communityName }}
          </el-button>
        </div>
      </el-form-item>
      <el-form-item>
        <div style="margin-left: 80px">
          <el-button type="primary" @click="submitVideoFrom">发布</el-button>
        </div>
      </el-form-item>
    </el-form>
    <el-dialog title="选择社区：" :visible.sync="dialogFormVisible">
      <div v-for="item in communityData" style="display: inline-block">
        <div class="communityDiv">
          <el-button @click="getCommunityId(item.communityId,item.communityName)">
            {{ item.communityName }}
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import videoPlay from "./videoPlay";
import request from "../../../utils/request";
export default {
  components:{videoPlay},
  name: "createVideo",
  data() {
    return{
      progressHiddenState:true,
      uploadHiddenState:false,
      num:0,
      users:{},
      communityData:[],
      communityName:"请选择社区",
      reprintInput:"no",
      dialogFormVisible: false,
      allImage:[],
      submitState:false,
      videoFrom:{
        videoTitle:'',
        videoSrc: '',
        videoType:'1',
        videoCommunity:0,
        videoReprintUrl:'',
        videoUsers:0,
        videoPoster:'',
        videoClick:0,
      }
    }
  },
  methods:{
    initCommunity(){
      request.get("/article/initCommunity").then(res =>{
        this.communityData=res.data;
      })
    },
    original(){
      this.reprintInput="no";
    },
    reprint(){
      this.reprintInput="yes";
    },
    getCommunityId(videoCommunity,communityName){
      this.communityName=communityName
      this.videoFrom.videoCommunity=videoCommunity
      this.dialogFormVisible = false
    },
    beforeUploadImg(){
      if (this.videoFrom.videoSrc === ''){
        this.$message.warning("请上传视频后再上传封面")
        this.$refs.coverUpdate.disabled=true;
      }else {
        this.$refs.coverUpdate.disabled=false;
      }
    },
    coverVideo(res){
      if (this.global.recommendImg === "http://localhost:8080"){
        this.allImage.push(res.msg.substring(33))
      }else if (this.global.recommendImg === "https://www.tiehuplayer.xyz"){
        this.allImage.push(res.msg.substring(39))
      }
      this.videoFrom.videoPoster=res.data;
      this.$message.success("已成功上传封面")
    },
    beforeUpload(file) {
      let testMsg=file.name.substring(file.name.lastIndexOf('.')+1)
      const extension = testMsg === 'mp4'
      if(!extension) {
        this.$message({
          message: '上传文件只能是 mp4格式!',
          type: 'warning'
        });
        return extension
      }
      this.progressHiddenState=false
      this.uploadHiddenState=true
      return extension
    },
    getFirstImage(res){
      this.progressHiddenState=true
      if (this.global.recommendImg === "http://localhost:8080"){
        this.allImage.push(res.msg.substring(33))
      }else if (this.global.recommendImg === "https://www.tiehuplayer.xyz"){
        this.allImage.push(res.msg.substring(39))
      }
      this.videoFrom.videoSrc=res.data;
    },
    submitVideoFrom(){
      this.videoFrom.videoUsers=this.users.usersId
      if (this.videoFrom.videoType === '1'){
        if (this.videoFrom.videoSrc === '' || this.videoFrom.videoTitle === '' || this.videoFrom.videoCommunity === 0){
          this.$message.warning("请完整填写信息~")
          return
        }
      }else{
        if (this.videoFrom.videoSrc === '' || this.videoFrom.videoTitle === '' || this.videoFrom.videoReprintUrl === '' || this.videoFrom.videoCommunity === 0){
          this.$message.warning("请完整填写信息~")
          return
        }
      }
      request.post('/article/submitVideo',this.videoFrom).then()
      this.submitState=true
      this.$message.success("发布成功~")
      this.$router.push("/video")
    },
    timing(){
      let stop=setInterval(()=>{
        this.num++;
        if (this.num === 90){
          clearInterval(stop);
        }
      },1000)
    }
  },
  created() {
    this.users=JSON.parse(localStorage.getItem("userData"))
  },
  mounted() {
    document.title="发布视频 - 贴乎";
    this.initCommunity()
    this.timing()
  },
  destroyed() {
    if (this.allImage.length !== 0 && this.submitState === false){
      request.delete('/file/delete/?allImage='+this.allImage)
    }
  },
}
</script>

<style scoped>
.postVideoDiv{
  margin: 0 auto;
  margin-top: 60px;
  max-width: 980px;
}
.communityDiv{
  margin-top: 20px;
  margin-left:10px;
  display: inline-block;
  box-shadow: 0 2px 59px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
</style>